<template>
  <div class="page-card-con" :style="cardConfig_.style || {}">
    <div :class="['page-card-item head',headConfig_.class].join(' ')" :style="headConfig_.style||{}" v-if="headConfig_.show">

      <div class="head-con ">
        <div :class="['head-item-title',headConfig_.titleConfig.class].join(' ')" :style="headConfig_.titleConfig.style||{}" v-if="headConfig_.titleConfig.show">
          <div :class="['title',headConfig_.titleConfig.title.class].join(' ')" :style="headConfig_.titleConfig.title.style||{}" v-if="headConfig_.titleConfig.title.show">
            {{headConfig_.titleConfig.title.label}}
          </div>
          <div :class="['title-sub',headConfig_.titleConfig.titleSub.class].join(' ')" :style="headConfig_.titleConfig.titleSub.style||{}" v-if="headConfig_.titleConfig.titleSub.show">
            {{headConfig_.titleConfig.titleSub.label}}
          </div>
        </div>
        <div :class="['head-item-btn-group',headConfig_.btnGroupConfig.class].join(' ')" :style="headConfig_.btnGroupConfig.style" v-if="headConfig_.btnGroupConfig.show">
          <a-button :key="'btn-'+index" v-for="(item,index) in headConfig_.btnGroupConfig.btnList" v-bind="item.attr" @click="()=>{btnEvent(item)}">{{item.label}}</a-button>
        </div>
      </div>
      <div :class="['head-con-line'].join(' ')" :style="headConfig_.lineConfig.style" v-if="headConfig_.lineConfig.show"></div>

    </div>
    <div :class="['page-card-item body', bodyConfig_.class].join(' ')" :style="bodyConfig_.style">
      <slot></slot>
    </div>
    <!-- <div class="page-card-item bottom">
      <div class="bottom head-con-line"></div>
      <div class=""></div>
    </div> -->
  </div>
</template>

<script>
export default {
  name:'PageCard',
  props:{
    event:{type:Function, default:()=>null},
    cardConfig:{type:Object, default:()=>{ return null}},
    headConfig:{type:Object, default:()=>{ return null}},
    bodyConfig:{type:Object, default:()=>{ return null}},
  },
  data(){
    return {
      cardConfig_:{
        style:{ height: 'calc(100vh - 142px)', background: '#FFFFFF'},
      },
      headConfig_:{
        show:true,
        class:'',
        style:{},
        lineConfig:{
          show:true,
          style:{ backgroundImage:'linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1))'}
        },
        titleConfig:{
          show:true,
          class:'',
          style:{ width: '200px', justifyContent:'flex-start'},
          title:{
            show:true,
            label:'主标题',
            class:'',
            style:{}
          },
          titleSub:{
            show:true,
            label:'副标题',
            class:'',
            style:{color:'#ccc'}
          }
        },
        btnGroupConfig:{
          show:true,
          class:'',
          style:{display: 'flex', justifyContent: 'space-between'},
          btnList:[
            // { label:'按钮1', attr:{ type:'primary', icon:'poweroff'}, isEvent: true, event:(item)=>{ console.log(item)}},
            // { label:'按钮2', attr:{ type:'dashed', shape:'round'}, isEvent: true, event:(item)=>{ console.log(item)}},
            // { label:'按钮3', attr:{ type:'link', shape:'circle'}, isEvent: true, event:(item)=>{ console.log(item)}},
            // { label:'按钮4', attr:{ type:'danger', disabled:false}, isEvent: true, event:(item)=>{ console.log(item)}},
          ]
        }
      },
      bodyConfig_:{
        class:'',
        style:{ justifyContent:'flex-start', alignItems:'center', flexDirection:'column'},
      }
    }
  },
  watch:{
    cardConfig:{
      handler(val){
        if(Object.prototype.toString.call(val) === '[object Object]'){
          this.cardConfig_ = Object.assign({},this.cardConfig_, val)
        }
        // console.log('cardConfig watch==>',val,this.cardConfig_);
      },
      deep: true,
      immediate: true
    },
    headConfig:{
      handler(val){
        if(Object.prototype.toString.call(val) === '[object Object]'){
          this.headConfig_ = Object.assign({},this.headConfig_, val)
        }
      },
      deep: true,
      immediate: true
    },
    bodyConfig:{
      handler(val){
        if(Object.prototype.toString.call(val) === '[object Object]'){
          this.bodyConfig_ = Object.assign({},this.bodyConfig_, val)
        }
      },
      deep: true,
      immediate: true
    },
  },
  methods:{
    btnEvent(btnData){
      const {isEvent,label} = btnData
      if(isEvent&&isEvent===true){
        this.event&&this.event(label)
      }
    }
  }

}
</script>

<style lang="less">
.page-card-con{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  padding: 10px;
  // border: 1px solid #ccc;

  .page-card-item{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    // border: 1px solid #ccc;
  }
  .head{
    height: 80px;
    padding: 10px;
    display: flex;
    justify-content:space-between;
    align-items: center;
    flex-direction: column;
    .head-con{
      width: 100%;
      display: flex;

      .head-item-title{
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .head-item-btn-group{
        flex: 1;
      }
    }
    .head-con-line{
      width: 100%;
      padding: 1px 0;
      margin: 5px 0;
      background-color: #ccc;
    }

  }
  .body{
    flex: 1;
    padding: 10px 0;
    overflow: auto;
    display: flex;
    // justify-content:flex-start;
    // align-items:flex-start;
  }
  .bottom{
    height: 50px;
    .head-con-line{
      width: 100%;
      padding: 1px 0;
      margin: 5px 0;
      background-color: #ccc;
    }
  }
}
</style>
